<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-11-07 16:12:54
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-11-07 16:23:01
 * @FilePath: \cxl-driving-training\src\components\Pagination.vue
-->
<template>
    <div class="pagination">
        <p>共 {{ _pagination.total }} 条</p>
        <el-pagination
            v-model:current-page="_pagination.pageNo"
            v-model:page-size="_pagination.pageSize"
            :background="false"
            layout="prev, pager, next, sizes"
            :total="_pagination.total"
            :page-sizes="[10, 15, 30, 50, 100]"
            @size-change="onPageSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>
<script lang="ts" setup>
import { ref, watchEffect } from 'vue'

/**
 * 接受来自父组件的传参
 */
const props = defineProps({
    pagination: {
        type: Object,
        default: () => {
            return {
                total: 100,
                pageNo: 1,
                pageSize: 10
            }
        }
    }
})

/**
 * 注册父组件回调方法
 */
const emits = defineEmits(['change', 'pageSize'])

/**
 * 不能直接使用props参数
 */
const _pagination = ref()

/**
 * 监听props值的变化
 * 设置 pagination 值
 */
watchEffect(() => {
    _pagination.value = props.pagination
})

/**
 * 监听分页发生改变 暴露当前的第几页的值
 * @param index
 */
const handleCurrentChange = (index: number) => {
    emits('change', index)
}

/**
 * 监听页面数量发生改变 暴露当前每页的数量
 * @param size
 */
const onPageSizeChange = (size: number) => {
    emits('pageSize', size)
}
</script>
<style scoped lang="scss">
.pagination {
    display: flex;
    align-items: center;
    justify-content: end;
    background-color: #fff;
    box-sizing: border-box;
    padding: 16px 0;
    p {
        font-size: 14px;
        margin-right: 16px;
    }
}
</style>
